<template>
	<view class="container">
		<loading :show="loading_show && naviHeight"></loading>
		<customHead
			@scrollChange="scrollChange" 
			title="常购"
			titlePaddingLeft="30"
			:navi_background="`linear-gradient(to right, ${lightColor}, ${lightColor1} 700rpx)`"
			:placeholder="currentFirm.id? false: true"
		>
			<template>
				<view class="slide_box">
					<view class="input_box" @click="searchClick">
						<u-icon name="search" size="20" :color="_temp_themeColor"></u-icon>
						<text class="text">搜索</text>
					</view>
				</view>
			</template>
		</customHead>
		
		<!-- 分类 -->
		<view class="goods_main" v-if="naviHeight && currentFirm.id">
			<scroll-view scroll-y="true" class="category_scroll" :show-scrollbar="true">
				<view class="refresh_view" :style="{height: `${naviHeight}px`}"></view>
				<view class="category_box">
					<view class="item"
						v-for="(item, index) in category_list" :key="index"
						:class="[category_index == index?'item_active':'']"
					>
						<view class="spot" :style="{backgroundColor: category_index==index?_temp_themeColor:''}" :class="[category_index == index?'spot_active':'']"></view>
						<view class="item_box">
							<view class="item_level2 _clickActive" @click="check_item(index)">
								<text :style="{color: category_index==index?_temp_themeColor:''}" :class="[category_index == index?'text_active':'']">{{item.categoryName}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="height: 188rpx;"></view>
			</scroll-view>
			<scroll-view scroll-y="true" 
				class="goodsList_scroll" 
				:refresher-triggered="refresher_show"
				@refresherrefresh="refresherrefresh"
				@scrolltolower="scrolltolower"
				:scroll-with-animation="true"
				:refresher-enabled="true"
				@refresherpulling="refresherpulling"
				@refresherabort="pullDis = 0"
				:lower-threshold="200"
			 >
				<refresh-view :pullDis="pullDis" :height="naviHeight"></refresh-view>
				<view class="goodsList_box _fade" v-if="goodsList.length">
					<view class="goods_item_wrap" @click="gotoDetail(item.id)" v-for="(item, index) in goodsList" :key="index">
						<view class="goods_item">
							<view class="goodsTitle_box">
								<view class="image">
									<image :src="item.rotationImgsJson[0]" lazy-load mode="aspectFill"></image>
								</view>
								<view class="title">
									<text class="title_text" :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
									<text class="desc_text" :style="{color: _temp_textColor}">{{item.goodsRemarks}}</text>
									<view class="price">
										<view class="" v-if="currentFirm.id">
											<span>￥</span>
											<text>
												{{item.goodsPrice}}
											</text>
										</view>
										<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
										<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="goodsList_box _fade" v-if="recentlyBuy.length">
					<view class="goods_item_wrap" v-for="(item, index) in recentlyBuy" :key="index">
						<view class="goods_item" v-for="(item1, index1) in item.orderItemList" :key="index1">
							<view class="goodsTitle_box">
								<view class="image">
									<image
										v-if="item1.goodsSpecification!==null && item1.goodsSpecification.specificationImages"
										:src="item1.goodsSpecification.specificationImages"
										lazy-load="true"
										mode="aspectFill"
									></image>
									<image v-else :src="item1.previewUrl" lazy-load="true" mode="aspectFill"></image>
								</view>
								<view class="title">
									<text class="title_text" :style="{color: _temp_titleColor}">{{item1.goodName}}</text>
									<text class="desc_text" :style="{color: _temp_textColor}">{{item1.goodsRemarks}}</text>
									<view class="price">
										<view class="" v-if="item1.plugsGoods.goodsType==0">
											<span>￥</span>
											<text class="num" v-if="item1.goodsSpecification!==null">{{item1.goodsSpecification.dealPrice}}</text>
											<text class="num" v-else >{{item1.goodsPrice}}</text>
										</view>
										
										<view class="" v-else-if="item1.plugsGoods.goodsType==1">
											<text class="num" v-if="item1.goodsSpecification!==null">{{item1.goodsSpecification.dealPrice}}</text>
											<text class="num" v-else >{{item1.goodsPrice}}</text>
											<span>积分</span>
										</view>
										<view class="goods_num">
											<text class="xicon">x</text>
											<text class="num_n">{{item1.goodsNum}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="order_bottom">
							<view class="order_bottom_left">
								<text>购买时间：{{item.payTime}}</text>
							</view>
							<view class="buyOneMore" :style="{background: _temp_themeColor}" @click="buyOneMore(item)">再来一单</view>
						</view>
					</view>
				</view>
				<view class="" v-if="!recentlyBuy.length && !goodsList.length">
					<u-empty
						:text="`您的${category_list[category_index].categoryName}暂无商品`"
						mode="data"
						icon="http://cdn.uviewui.com/uview/empty/data.png"
					>
					</u-empty>
				</view>
				<view class="" style="height: 188rpx;"></view>
			</scroll-view>
		</view>
		<view class="emptyGoods" v-if="naviHeight && !currentFirm.id">
			<u-empty
				text="暂无店铺"
				mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png"
			>
			</u-empty>
			<view class="button_box">
				<button @click="gotoAddStore" :style="{backgroundColor: _temp_themeColor}" class="button _btn_base">新建店铺</button>
			</view>
		</view>
		<tabbar :current="2" :cart="totalCartNum"></tabbar>
	</view>
</template>

<script>
	import {
		searchPlugsGoodCategoryList,
		searchPlugsGoodsByCategoryId,
		searchPlugsHotGoodsList,
		searchPlugsCollectByUserId,
		searchPlugsGoodsList,
		searchUserOrderListByStatus,
		searchUserLastMonthOrderListByStatus,
		searchPlugsFootmarkListUserId
	} from '@/tools/request/api.js'
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
	export default {
		data() {
			return {
				category_list: [
					{categoryName: '常购清单'},
					{categoryName: '最近购买'},
					{categoryName: '最近浏览'},
					{categoryName: '热销产品'}
				],
				unfold_show: false,
				headHeight: 0,
				loading_show: false,
				scrolltolowerFlag: false,
				refresher_show: false,
				goodsList: [],
				category_index: 0,
				scrollImgList: 0,
				currentId: 0,
				goodsPage: {
					page: 1,
					size: 10,
					totalPage: 0,
					hasNextPage: false
				},
				pullDis: 0,
				recentlyBuy: []
			};
		},
		onLoad () {
			this.IS_APP_DONE((res) => { //登陆完成会调用
				this.getOftenList();
			});
		},
		onShow () {
			
		},
		computed: {
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.7);
				return light_color;
			},
			lightColor1 () {
				let light_color = makeLightColor(this._temp_themeColor, 0.9);
				return light_color;
			}
		},
		methods: {
			...mapMutations('pay_store', ['SET_SHOP_CART_LIST']),
			...mapMutations('app_store', ['IS_APP_DONE']),
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			gotoDetail (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${id}`
				})
			},
			searchClick () {
				uni.navigateTo({
					url: '../../subpack_home/search/search'
				})
			},
			addCart (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				this.addCartGoods(item);
			},
			check_item (index) {
				if (this.category_index == index) return;
				this.category_index = index;
				this.goodsList = [];
				this.recentlyBuy = [];
				this.goodsPage.page = 1;
				this.getList();
			},
			// 获取列表数据
			getList () {
				if (this.category_index == 0) {
					this.getOftenList();
				}
				if (this.category_index == 1) {
					this.getLatelyList();
				}
				if (this.category_index == 2) {
					this.getLatelyViewList();
				}
				if (this.category_index == 3) {
					this.getHotList();
				}
			},
			// 获取常购列表
			getOftenList () {
				let postdata = {
					businessId: this.businessId,
					page: this.goodsPage.page,
					size: this.goodsPage.size
				}
				this.loading_show = true;
				searchPlugsCollectByUserId(postdata).then(res => {
					if (res.code == 200) {
						this.goodsPage.totalPage = res.body.pages;
						this.goodsPage.hasNextPage = res.body.hasNextPage;
						let list = res.body.list;
						let preList = [];
						list.forEach((item) => {
							if (item.rotationImgsJson) {
								item.rotationImgsJson = JSON.parse(item.rotationImgsJson);
							}
						})
						list.forEach((item, index) => {
							preList.push(item.extJSON)
						})
						if (this.refresher_show) {
							this.goodsList = preList;
						} else {
							this.goodsList = this.goodsList.concat(preList);
						}
						this.refresher_show = false;
						this.loading_show = false;
					}
				})
			},
			getTime(timestamp) {
				let date = new Date(timestamp);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hour = date.getHours();
				let minute = date.getMinutes();
				let second = date.getSeconds();
				let time = year + '-' + this.addZero(month) + '-' + this.addZero(day) + ' ' + this.addZero(hour) + ':' + this.addZero(minute) + ':' + this.addZero(second);
				return time;
			},
			addZero(s) {
				return s < 10 ? '0' + s : s;
			},
			// 获取上个月时间
			getLastMonth () {
				const currentDate = new Date(); // 获取当前时间
				currentDate.setMonth(currentDate.getMonth() - 1); // 设置月份为一个月前
				const timestamp = currentDate.getTime(); // 获取时间戳
				return this.getTime(timestamp);
			},
			// 获取最近购买列表
			getLatelyList () {
				this.goodsList = [];
				let postData = {
					startPage: this.goodsPage.page,
					size: this.goodsPage.size,
					orderStatus: 5,
					startDateTime: this.getLastMonth(),
					endDateTime: this.getTime(Date.now())
				}
				this.loading_show = true;
				searchUserLastMonthOrderListByStatus(postData).then(res => {
					if (res.code != 200) return uni.$showMsg();
					this.goodsPage.totalPage = res.body.pages;
					this.goodsPage.hasNextPage = res.body.hasNextPage;
					let list = res.body.list;
					if (this.refresher_show) {
						this.recentlyBuy = list;
					} else {
						this.recentlyBuy = this.recentlyBuy.concat(list);
					}
					this.refresher_show = false;
					this.loading_show = false;
				})
			},
			
			// 获取最近浏览列表
			getLatelyViewList () {
				this.loading_show = true;
				let postData = {
					page: this.goodsPage.page,
					size: this.goodsPage.size,
					businessId: this.businessId,
					userId: this.userId
				}
				searchPlugsFootmarkListUserId(postData).then((res) => {
					this.goodsPage.totalPage = res.body.pages;
					this.goodsPage.hasNextPage = res.body.hasNextPage;
					let list = res.body;
					if (Object.keys(list).length < 1) return;
					let goodsArr = [];
					for (let key in list) {
						list[key].forEach((item) => {
							goodsArr.push(item.extJSON);
						})
					}
					if (this.refresher_show) {
						this.goodsList = goodsArr;
					} else {
						this.goodsList = this.goodsList.concat(goodsArr);
					}
					this.refresher_show = false;
					this.loading_show = false;
					this.scrolltolowerFlag = false;
				})
			},
			// 获取热销列表
			getHotList () {
				let data = {
					page: this.goodsPage.page,
					size: this.goodsPage.size,
					businessId: this.businessId,
					categoryId: '-1'
				};
				this.loading_show = !this.scrolltolowerFlag;
				searchPlugsHotGoodsList(data).then(res => {
					if (res.code == 200) {
						this.goodsPage.totalPage = res.body.pages;
						this.goodsPage.hasNextPage = res.body.hasNextPage;
						let list = res.body.list;
						if (this.refresher_show) {
							this.goodsList = list;
						} else {
							this.goodsList = this.goodsList.concat(list);
						}
						this.refresher_show = false;
						this.loading_show = false;
						this.scrolltolowerFlag = false;
					} else {
						uni.$showMsg();
					}
				})
			},
			// 再来一单
			buyOneMore (order, good) {
				let goodsList = [];
				order.orderItemList.forEach((item, index) => {
					let postData = {
						goodsId: item.goodsId,
						previewUrl: item.previewUrl,
						goodsPrice: 0,
						goodsCategoryId: item.plugsGoods.categoryId,
						goodsNum: 1,
						goodsSpecificationIds: item.goodsSpecificationIds?item.goodsSpecificationIds:'0',
						goodsSpecification: item.goodsSpecification?item.goodsSpecification:[],
						businessId: this.businessId,
						distributionFee: item.plugsGoods.distributionFee,
						goodsName: item.goodName,
						userId: uni.getStorageSync('__ddminiUserInfo').id || 0
					}
					if (item.goodsSpecification !== null) {
						postData.goodsPrice = item.goodsSpecification.dealPrice;
					} else {
						postData.goodsPrice = item.goodsPrice;
					}
					goodsList.push(postData);
				})
				// 将要下单的商品信息提交到store
				this.SET_SHOP_CART_LIST(goodsList);
				uni.setStorage({
					key: '__ddminiShopCart',
					data: goodsList
				});
				let scoreType = order.orderItemList[0].plugsGoods.goodsType;
				// console.log(scoreType, 'scoreType')
				uni.navigateTo({
					url: `/pages/order/payEnter/payEnter?score=${scoreType}`
				});
			},
			
			// 滚动到底部加载更多
			scrolltolower () {
				if (!this.goodsPage.hasNextPage) return;
				this.goodsPage.page++;
				this.scrolltolowerFlag = true;
				this.getList();
			},
			// 下拉刷新
			refresherrefresh () {
				this.refresher_show = true;
				this.goodsPage.page = 1;
				this.getList();
			},
			// 下拉监听
			refresherpulling (e) {
				if (e.detail.dy >= 54) return;
				this.pullDis = e.detail.dy;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		
		.slide_box{
			width: 100%;
			height: 84rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			padding-bottom: 20rpx;
			
			.input_box{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center; 
				align-items: center;
				background-color: #fff;
				border-radius: 32rpx;
				
				.text{
					font-size: 26rpx;
					color: #9f9f9f;
				}
			}
		}
		
		.unfold_box{
			width: 100%;
			background: radial-gradient(100% 100% at 20% 0%, #d8f3e7, #fff 100%);
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			
			.backColor{
				width: 100%;
				background: radial-gradient(100% 100% at 90% 0%, #eaf8e0, rgba(255,255,255,0) 100%);
				padding-top: 30rpx;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				
				.goods_main{
					display: flex;
					width: 100%;
					flex-wrap: wrap;
					
					.goods_item{
						flex: 0 0 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-bottom: 30rpx;
						
						.goods_title{
							width: 100%;
							margin-top: 10rpx;
							text-align: center;
							
							.title{
								padding: 2rpx 10rpx;
								font-size: 24rpx;
								color: #444444;
							}
							
							.active_title{
								background-color: $theme-color;
								color: #fff;
								border-radius: 20rpx;
								box-sizing: border-box;
							}
						}
						
						.image{
							width: 90rpx;
							height: 90rpx;
							border-radius: 20rpx;
							border: 4rpx solid #fff;
						}
						.active_border{
							border: 4rpx solid $theme-color;
						}
					}
				}
				.bottom{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;
					border-top: 1rpx solid #ddd;
					color: #7f7f7f;
					
					text{
						padding: 0 10rpx;
						font-size: 26rpx;
					}
				}
			}
		}
		
		.scroll_box{
			padding-bottom: 16rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			position: relative;
			box-sizing: border-box;
			
			.scroll{
				width: 640rpx;
				white-space: nowrap;
				display: flex;
				
				.goods_box{
					display: flex; 
					white-space: nowrap;
					
					.goods_item{
						display: flex;
						flex: 0 0 20%;
						flex-direction: column;
						align-items: center;
						
						.goods_title{
							width: 100%;
							margin-top: 10rpx;
							text-align: center;
							
							.title{
								padding: 2rpx 10rpx;
								font-size: 24rpx;
								color: #444444;
							}
							
							.active_title{
								background-color: $theme-color;
								color: #fff;
								border-radius: 20rpx;
								box-sizing: border-box;
							}
						}
						
						.image{
							width: 90rpx;
							height: 90rpx;
							border-radius: 20rpx;
							border: 4rpx solid #fff;
						}
						.active_border{
							border: 4rpx solid $theme-color;
						}
					}
				}
			}
			.shade_box{
				width: 80rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #eaf8e0;
				position: absolute;
				right: 0;
				top: 0;
				
				
				.wrap{
					width: 100%;
					height: 80%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					padding: 30rpx 0;
					box-sizing: border-box;
					box-shadow: -10rpx 0 20rpx -10rpx #dedede;
					font-size: 26rpx;
				}
			}
		}
		
		.goods_main{
			display: flex;
			box-sizing: border-box;
			
			.category_scroll{
				width: 170rpx;
				height: 100vh;
				background-color: #f3f3f3;
				
				.category_box{
					width: 100%;
					padding-bottom: 200rpx;
					
					.item_active{
						background-color: #fff;
						border-bottom-right-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
					}
					
					.item{
						width: 100%;
						display: flex;
						padding: 26rpx 0;
						
						.spot{
							width: 10rpx;
							margin-right: 10rpx;
							border-bottom-right-radius: 12rpx;
							border-top-right-radius: 12rpx;
						}
						.spot_active{
							background-color: $theme-color;
						}
						.item_box{
							flex: 1;
							position: relative;
							overflow: hidden;
							
							.item_level2{
								height: 66rpx;
								display: flex;
								align-items: center;
								font-size: 28rpx;
								color: #4f4f4f;
								
								.text_active{
									color: $theme-color;
								}
							}
							@keyframes show {
								from{
									transform: translateX(-100%);
								} to {
									transform: translateX(0);
								}
							}
							.level3_box{
								width: 100%;
								position: relative;
								transform: translateX(-100%);
								animation-name: show;
								animation-duration: 0.4s;
								animation-fill-mode: forwards;
								
								.item_level3{
									width: 80%;
									height: 56rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 24rpx;
									color: #838383;
									margin-top: 20rpx;
									margin-bottom: 20rpx;
									border-radius: 10rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
								.text_active{
									color: $theme-color;
									background-color: #dafbf9;
								}
							}
						}
					}
				}
			}
			.goodsList_scroll{
				width: 580rpx;
				height: 100vh;
				box-sizing: border-box;
				border-left: 1rpx solid #ddd;
				
				@keyframes show {
					from{
						transform: translateX(-100%);
						opacity: 0;
					} to {
						transform: translateX(0);
						opacity: 1;
					}
				}
				
				.goodsList_box{
					width: 100%;
					padding: 0 10rpx;
					box-sizing: border-box;
					background-color: #fff;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					padding-top: 30rpx;
					// animation-name: show;
					// animation-duration: 0.2s;
					// animation-fill-mode: forwards;
					
					
					.goods_item_wrap{
						width: 100%;
						margin-bottom: 30rpx;
						background-color: #fff;
						padding-right: 20rpx;
						box-sizing: border-box;
						border-radius: 20rpx;
						box-shadow: 0 4rpx 15rpx 5rpx #f5f5f5;
						
						.goods_item{
							margin-left: 20rpx;
							border-bottom: 1rpx solid #e6e6e6;
						
							.goodsTitle_box{
								display: flex;
								align-items: center;
								
								.image{
									width: 160rpx;
									height: 160rpx;
									border-radius: 20rpx;
									
									image{
										width: 100%;
										height: 100%;
										border-radius: 20rpx;
									}
								}
								
								.title{
									flex: 1;
									display: flex;
									flex-direction: column;
									margin-left: 20rpx;
									padding: 30rpx 0;
									box-sizing: border-box;
									
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									
									.title_text{
										padding: 20rpx 0;
										overflow: hidden;
										text-overflow: ellipsis;
									}
									.desc_text{
										color: #535353;
										font-size: 28rpx;
										overflow: hidden;
										text-overflow: ellipsis;
									}
									.price{
										margin-top: 20rpx;
										font-size: 34rpx;
										color: #FF0000;
										font-weight: bold;
										display: flex;
										justify-content: space-between;
										align-items: center;
										
										span{
											font-size: 30rpx;
										}
										.image{
											width: 50rpx;
											height: 50rpx;
										}
										.goods_num{
											color: #535353;
											font-weight: normal;
											
											.xicon{
												font-size: 24rpx;
											}
											.num_n{
												font-size: 28rpx;
											}
										}
									}
									.image_box{
										display: flex;
										justify-content: flex-end;
										
										.image{
											width: 40rpx;
											height: 40rpx;
										}
									}
								}
							}
							.goodsSpecification_box{
								display: flex;
								padding: 20rpx 0;
								margin-left: 40rpx;
								
								.image{
									width: 120rpx;
									height: 120rpx;
									border-radius: 20rpx;
									
									image{
										width: 100%;
										height: 100%;
										border-radius: 20rpx;
									}
								}
								.title{
									flex: 1;
									display: flex;
									flex-direction: column;
									padding-left: 20rpx;
									box-sizing: border-box;
									
									.title_text{
										padding: 20rpx 0;
									}
									.desc{
										color: #9a9a9a;
										font-size: 26rpx;
										display: flex;
										justify-content: space-between;
										padding-right: 30rpx;
										box-sizing: border-box;
										
										.image{
											width: 40rpx;
											height: 40rpx;
										}
									}
								}
							}
						}
						.goods_item:last-child{
							border: none;
						}
						.order_bottom{
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 20rpx 0 20rpx 20rpx;
							box-sizing: border-box;
							
							
							.order_bottom_left{
								font-size: 24rpx;
								color: #8c8c8c;
							}
							.buyOneMore{
								width: 150rpx;
								height: 50rpx;
								font-size: 26rpx;
								color: #fff;
								font-weight: normal;
								border-radius: 25rpx;
								line-height: 50rpx;
								text-align: center;
							}
						}
						
					}
					.goods_item_wrap:last-child{
						border: none;
					}
				}
			}
		}
		.emptyGoods{
			
			.button_box{
				margin-top: 30rpx;
				
				.button{
					width: 280rpx;
					height: 74rpx;
					border-radius: 37rpx;
					// background: linear-gradient(to right, #00e297, #00c885);
					color: #fff;	
					font-size: 30rpx;
				}
			}
		}
	}
</style>
